<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>登录页面</title>

    <style>
      .ht {
        font-family: "隶书";
        text-align: center;
        color: rgb(70, 214, 214);
      }
      .tab {
        width: 500px;
        border: 5px solid rgb(15, 97, 97);
        margin: 0px auto;
        border-radius: 5px;
        font-family: "隶书";
        /* 用于设置单元格边框与边框之间的空白距离 */
        border-spacing: 0px;
      }
      /* 
      .ltr td 是一种组合选择器的写法 表示选中所有属于 .ltr 元素后代的 <td> 标签 
      */
      .ltr td {
        border: 1px solid powderblue;
      }
      .ipt {
        border: 0px;
        width: 50%;
      }
      .btn1 {
        border: 2px solid gainsboro;
        border-radius: 4px;
        width: 60px;
        background-color: antiquewhite;
      }
      /* id 选择器 */
      #usernameMsg,
      #userPwdMsg {
        color: rgb(243, 65, 21);
      }
      .buttonContainer {
        text-align: center;
      }
      
    </style>

    <script>
      // 检验用户名格式是否合法的函数
      function checkUsername() {
        // 定义正则表达式来表示字符串的规则
        var usernameReg = /^[a-zA-Z0-9]{5,10}$/;
        // 获取用户在页面上输入的信息
        var usernameInput = document.getElementById("usernameInput");
        var username = usernameInput.value;
        // 获得格式提示的框
        var usernameMsg = document.getElementById("usernameMsg");
        // 判断是否格式有误
        // 如果格式有误
        if (!usernameReg.test(username)) {
          usernameMsg.innerText = "用户名格式错误";
          return false;
        }
        // 如果格式正确
        usernameMsg.innerText = "ok";
        return true;
      }

      // 检验用户密码格式是否合法的函数
      function checkUserPwd() {
        // 定义正则表达式来表示字符串的规则
        var userPwdReg = /^[0-9]{6}$/;
        // 获取用户在页面上输入的信息
        var usernameInput = document.getElementById("userPwdInput");
        var userPwd = usernameInput.value;
        // 获得格式提示的框
        var userPwdMsg = document.getElementById("userPwdMsg");
        // 判断是否格式有误
        if (!userPwdReg.test(userPwd)) {
          userPwdMsg.innerText = "用户密码格式有误";
          return false;
        }
        userPwdMsg.innerText = "ok";
        return true;
      }

      // 表单在提交时，需要先验证用户的用户名和密码，格式正确才会提交
      function checkForm() {
        var flg1 = checkUsername();
        var flg2 = checkUserPwd();

        return flg1 && flg2;
      }
    </script>
  </head>
  <body>
    <h1 class="ht">欢迎使用日程管理系统</h1>
    <h3 class="ht">请登录</h3>
    <form method="post" action="user/login" onsubmit="return checkForm()">
      <table class="tab">
        <tr class="ltr">
          <td>请输入账号</td>
          <td>
            <input
              class="ipt"
              type="text"
              id="usernameInput"
              name="username"
              onblur="checkUsername()"
            />
            <!-- span 标签相当于一个占位符，用于后续动态填充内容或者修改样式 -->
            <span id="usernameMsg"></span>
          </td>
        </tr>

        <tr class="ltr">
          <td>请输入密码</td>
          <td>
            <input
              class="ipt"
              type="password"
              id="userPwdInput"
              name="userPwd"
              onblur="checkUserPwd()"
            />
            <span id="userPwdMsg"></span>
          </td>
        </tr>

        <tr class="ltr">
          <td colspan="2" class="buttonContainer">
            <input class="btn1" type="submit" value="登录" />
            <input class="btn1" type="reset" value="重置" />
            <button class="btn1"><a href="regist.html">去注册</a></button>
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>
